
<template>
    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
        :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="rules.maxSize" :on-exceed="handleExceed"
        :file-list="fileList" :show-file-list="false">
        <el-button size="small" type="primary">点击上传</el-button>
        <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 10MB</div>
        </template>
    </el-upload>
    <div class="demo-image__preview upload-imgs-container">
        <div v-for="(item,i) in fileList" :key="item.id">
            <div class="thumb-item">
                <el-image :ref="setImageRef" style="width: 200px; height: 200px" :src="item.url"
                    :preview-src-list="viewFileList">
                </el-image>
                <div class="control">
                    <i  class="el-icon-close del" @click.prevent.stop="delItem(item.id)" title="删除"></i>
                    <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
                        <i class="el-icon-edit"></i>
                    </div>
                    <div class="control-bottom" >
                        <i  title="前移" class="control-bottom-btn el-icon-back"
                             @click.stop="move(item.id)"></i>
                        <i v-if="preview"  class="control-bottom-btn el-icon-view" title="预览" style="cursor: pointer"
                            @click.stop="previewImg(item,i)"></i>
                        <i  title="后移" class="control-bottom-btn el-icon-right"
                             @click.stop="move(item.id)"></i>
                    </div>
                </div>
            </div>

        </div>
        <el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer && viewFileList.length>0" :url-list="viewFileList" :initial-index="initialIndex"/>
    </div>
</template>
    
<script>
export default {
    props: {
        rules: {
            type: [Object, Function],
            default: () => ({
                maxSize: 1,
            }),
        }
    },
    computed: {
    },
    data() {
        return {
            preview:true,
            imageRefs: [],
            viewFileList:[],
            showViewer:false,
            initialIndex:0,
            fileList: [
                {
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
                {
                    name: 'food2.jpeg',
                    url: 'https://img0.baidu.com/it/u=3942419239,954908845&fm=253&fmt=auto&app=138&f=JPEG?w=1080&h=323',
                },
            ],
        }
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 ${this.rules.maxSize} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件`
            )
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`, fileList)
        },
        /**
     * 预览图像
     * @param {Object} data 需要预览的项的数据
     * @param {Number} index 索引序号
     */
        previewImg(data, index) {
            console.log(this.imageRefs[index],index)
            this.viewFileList = this.fileList.map(item => item.url)
            this.showViewer = true
            this.initialIndex = index
        },
        setImageRef(el) {
            if (el) {
                this.imageRefs.push(el)
            }
        },
        delItem(id) {
            console.log(id)
        },
        move(id) {
            console.log(id)
        },
        handleClick(id){
            console.log(id)
        }
    },
}
</script>
<style lang="scss" scoped>
.upload-imgs-container {
  display: flex;
  flex-wrap: wrap;

  &:focus {
    outline: none;
  }

  .upload-item,
  .thumb-item {
    border-radius: 3px;
    transition: all 0.1s;
    color: #666666;
    margin-right: 1em;
    margin-bottom: 1em;
    position: relative;
    &.disabled {
      color: #ababab;
    }

    &:not(.disabled):hover {
      border-color: #3963bc;
      color: #3963bc;
    }
  }

  .thumb-item {
    :v-deep(.el-image-viewer__canvas) {
      position: absolute;
      max-width: 800px;
      left: 50%;
      transform: translateX(-50%);
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: all 0.3s;
      transition-delay: 0.1s;

      .wait-upload {
        background: #ffcb71;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }
      }
    }

    .control {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all 0.3s;
      transition-delay: 0.1s;

      .del {
        background: #f4516c;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        opacity: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }

        &:hover {
          transform: translate(-0.5em, 0.4em) scale(1.5);
        }
      }

      .preview {
        color: white;
        font-size: 2em;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.2);
        }
      }

      .control-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 1.5em;
        display: flex;
        justify-content: space-around;
        transform: translate(0, 100%);
        transition: all 0.2s;
        transition-delay: 0.1s;
        padding: 5px 0;

        .control-bottom-btn {
          transform: all 0.2s;

          &.disabled {
            color: #ababab;
            cursor: not-allowed;
          }

          &:not(.disabled):hover {
            transform: scale(1.2);
          }
        }
      }
    }

    &:hover {
      .control {
        opacity: 1;
      }

      .del {
        opacity: 1;
      }

      .control-bottom {
        transform: translate(0, 0);
      }
    }
  }

  .upload-imgs__input {
    display: none;
  }
}
</style>


    